<template>
	<view class="">
		<uni-popup ref="popup" :style="{ zIndex: 999 }" type="bottom" safeArea borderRadius="10px 10px 0 0" background-color="var(--theme-box-bg)">
			<view class="popup-content">
				<view class="flex-between p-lr-16">
					<text class="fs16 fb">{{$t('setLang')}}</text>
					<text class="text-md text-des-color" @click="closePopup">{{$t('cancel')}}</text>
				</view>
				<scroll-view scroll-y="true" class="scroll-Y" style="height: 50vh;margin-top: 20px;" :show-scrollbar="false">
					<view class="fs14">
						<view :class="['flex-between','item','p-lr-16',langIndex==index?'highlight-color selected':'']" v-for="(item,index) in langList" :key="index" @click="setLang(index)">
							<view class="">{{item.name}}</view>
							<view class="" v-if="langIndex==index"><uni-icons type="checkmarkempty" color="#1a7acb" size="16"></uni-icons></view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import { ref, watch, defineProps, getCurrentInstance, onMounted  } from 'vue';
	import useGlobalProperties from '../utils/useGlobalProperties.js'
	const { $t,$i18n } = useGlobalProperties()
	const props = defineProps({
		select:{
			type:Number,
			default:0
		}
	})
	const popup = ref(null)
	watch(()=>props.select,(newVal)=>{
		popup.value.open();
	})
	// 关闭弹窗
	const closePopup = () => {
		popup.value.close();
	};
	const langIndex = ref(0)
	const langList = [
		{ name:'繁体中文', value:'zh-Hant' },
		{ name:'English', value:'en' },
		{ name:'简体中文', value:'zh-Hans' },
		{ name:'日本語', value:'Japanese' },
		{ name:'ภาษาไทย', value:'Thai' },
		{ name:'Tiếng Việt', value:'Vietnamese' },
		{ name:'Indonesia', value:'Indonesian' },
		{ name:'한국어', value:'Korean' },
		{ name:'Français', value:'French' },
		{ name:'Deutsch', value:'German' },
	]	
	const setLang = (index) =>{
		langIndex.value = index
		uni.setStorageSync('__LAN__',langList[index].value)
		uni.setLocale(langList[index].value);
		// 3 切换缓存语言
		$i18n.locale = langList[index].value
		document.documentElement.lang = langList[index].value; // 修改 HTML 的 lang 属性
		// 5 重启app
		// #ifdef APP-PLUS
		plus.runtime.restart();
		// #endif
		// #ifdef H5
		window.location.reload()
		// #endif
	}
	onMounted(()=>{
		langList.forEach((item,index)=>{
			if(item.value == $i18n.locale){
				// console.log('$i18n.locale',$i18n.locale);
				langIndex.value = index
			}
		})
	})
</script>

<style scoped lang="scss">
	.popup-content {
		padding-top: 15px;
		min-height: 100px;
		background-color: var(--theme-box-bg);
		border-radius: 15px 15px 0 0;
		position: relative;
		.item {
		    height: 52px;
		    border-top: 1px solid #eee;
		}
		
	}
</style>